<template>
  <div>
    
    <AppBanner/>
    <hot-tui-jian title="热门推荐">
      <div slot="tag">
        <div class="mintitle-sum">
          <div class="mintitle">
            华语
          </div>
          <div class="mintitle">
            |
          </div>
          <div class="mintitle">
            流行
          </div>
          <div class="mintitle">
            |
          </div>
          <div class="mintitle">
            摇滚
          </div>
          <div class="mintitle">
            |
          </div>
          <div class="mintitle">
            民谣
          </div>
          <div class="mintitle">
            |
          </div>
          <div class="mintitle">
            电子
          </div>

        </div>
      </div>
      <a href="https://www.douyin.com/">更多</a>

    </hot-tui-jian>



    <div class="content">
      <div class="content-left">
        <SearList v-for="(item,index) in imagelist" :key="index"
                  :img-url="item.imgUrl"
                  :number="item.number"
                  :msg="item.msg"
                  :listId="index"
                  @changeNum="father"
        ></SearList>

      </div>
      <div class="box2">
        <div class="box22">
          <hot-tui-jian title="新碟上架">
            <a href="https://v.qq.com/">更多</a>
          </hot-tui-jian>
        </div>
        <div class="album">
          <div class="albumlist">
            <AlbumList
                v-for="(item3,index3) in albumlist" :key="index3"
                :albumimg-url="item3.albumimgUrl"
                :albummsg="item3.albummsg"
                :albumname="item3.albumname"
                :albumId="index3">
              ></AlbumList>
          </div>
        </div>

      </div>
      <div class="box3">
        <hot-tui-jian title="榜单"></hot-tui-jian>

        <div class="TopList">
          <TopList
              v-for="(item4,index4) in toplist" :key="index4"
              :topimg-url="item4.topimgUrl"
              :topmsg="item4.topmsg"
              :topname="item4.topname">
          </TopList>

        </div>

<div class="float">
  <SongList>
    <div slot="table">
      <div class="list">
        <ol>
          <li class="shen" @click="btn">
            <span class="no-top shen">1</span>
            诀别书
          </li>
          <li class="qian">
            <span class="no-top qian">2</span>
            卜卦·2024
          </li>
          <li class="shen">
            <span class="no-top shen">3</span>
            热爱2023
          </li>
          <li class="qian">
            <span class="no qian">4</span>
            抵达时间的尽头
          </li>
          <li class="shen">
            <span class="no shen">5</span>
            我还想她
          </li>
          <li class="qian">
            <span class="no qian">6</span>
            词不达意 (live)
          </li>
          <li class="shen">
            <span class="no shen">7</span>
            Running to the sunset
          </li>
          <li class="qian">
            <span class="no qian">8</span>
            你是我的风景
          </li>
          <li class="shen">
            <span class="no shen">9</span>
            HowD ISayGoodbye
          </li>
          <li class="qian">
            <span class="no qian">10</span>
            命运
          </li>
          <div class="queryall">查看全部></div>

        </ol>
      </div>
    </div>
  </SongList>

  <SongList>
    <div slot="table2">
      <ol>
        <li class="shen">
          <span class="no-top shen">1</span>浮光
        </li>
        <li class="qian">
          <span class="no-top qian">2</span>Do That</li>
        <li class="shen">

          <span class="no-top shen">3</span>计划里
        </li>
        <li class="qian">
          <span class="no qian">4</span>慢冷
        </li>
        <li class="shen">
          <span class="no shen">5</span>Everywhere We
        </li>
        <li class="qian">
          <span class="no qian">6</span>True(与恶魔有约)电音beat
        </li>
        <li class="shen">
          <span class="no shen">7</span>我还想她
        </li>
        <li class="qian">
          <span class="no qian">8</span>卜卦·2024
        </li>
        <li class="shen">
          <span class="no shen" >9</span>Red Moon
        </li>
        <li class="qian">
          <span class="no qian">10</span>ezdaxmayli agina
        </li>
        <div class="queryall">查看全部></div>
      </ol>
    </div>
  </SongList>

  <SongList>
    <div slot="table3">
      <ol>
        <li class="shen"><span class="no-top shen">1</span>败者讲话</li>
        <li class="qian"><span class="no-top qian" >2</span>黑蝴蝶</li>
        <li class="shen"><span class="no-top shen">3</span>山上</li>
        <li class="qian"><span class="no qian">4</span>最被低估的说唱歌手</li>
        <li class="shen"><span class="no shen">5</span>2024.</li>
        <li class="qian"><span class="no qian">6</span>水瓶座</li>
        <li class="shen"><span class="no shen">7</span>月背</li>
        <li class="qian"><span class="no qian">8</span>人</li>
        <li class="shen"><span class="no shen">9</span>纽约上海 NY2SH</li>
        <li class="qian"><span class="no qian">10</span>一半一半</li>
        <div class="queryall">查看全部></div>
      </ol>
    </div>
  </SongList>

</div>
 </div>
    </div>





    <div class="box">
      <div class="part">
        <div class="part1">
          <div class="part11">
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
          </div>
          <button class="part111">
            用户登录
          </button>

        </div>
        <div class="part2">
          <div class="part2-left">
            入驻歌手
          </div>
          <div class="part2-right">
            查看全部
          </div>

        </div>
        <div class="line">

        </div>

        <div>
        <SingerList
        v-for="(item1,index1) in singerlist" :key="index1"
        :singerimg-url="item1.singerimgUrl"
        :singermsg="item1.singermsg"
        :singername="item1.singername"
        :singerId="index1"></SingerList>

          <div class="applicant">
            申请成为网易音乐人
          </div>
        </div>
        <div class="part3">
          <div class="part3-left">
            热门主播
          </div>



        </div>
        <div class="line2">

        </div>
        <ReMenAnchor   v-for="(item2,index2) in anchorList" :key="index2"
                       :anchorimg-url="item2.anchorimgUrl"
                       :anchormsg="item2.anchormsg"
                       :anchorname="item2.anchorname"
                       :anchorId="index2">

        </ReMenAnchor>


      </div>
      <div class="ying">

      </div>

    </div>

<AppFooter></AppFooter>

  </div>
</template>

<script>
import SearList from "@/components/SearchList.vue";
import SingerList from "@/components/SingerList.vue";
import HotTuiJian from "@/components/HotTuiJian.vue";
import AppBanner from "@/components/AppBanner.vue";
import ReMenAnchor from "@/components/ReMenAnchor.vue";
import AlbumList from "@/components/AlbumList.vue";
import TopList from "@/components/TopList.vue";
import SongList from "@/components/SongList.vue";
import AppFooter from "@/components/AppFooter.vue";


export default {


  data(){
    return{
      imagelist:[
        {
          imgUrl:'https://p2.music.126.net/kZb9DO4vykqiYEx0HHx86w==/109951163065542645.jpg?param=140y140',
          number:8920,
          msg: '50部爱情电影，50种浓情蜜意'

        },{
          imgUrl:'https://p2.music.126.net/fIIlHjEpHVe83hmDn3Zfiw==/109951168616082867.jpg?param=140y140',
          number:9034,
          msg: '「纯音乐」你偶尔需要安静的发泄'
        },{
          imgUrl:'https://p2.music.126.net/BYUIoXcdJEEBkwQwUl43-Q==/109951164137325416.jpg?param=140y140',
          number:9000,
          msg:'别整太大鸭力，要多鸡立自己'
        },{
          imgUrl:'https://p2.music.126.net/NwhNZG1oYoWwTNdYzLaOAA==/109951169260762302.jpg?param=140y140',
          number:9430,
          msg:'萨满王利夫：为历史的边角料而歌｜如此东北02'
        },{
          imgUrl:'https://p2.music.126.net/uXbDB1aWsp36_I_lQs-DeA==/1411772930113118.jpg?param=140y140',
          number:1230,
          msg: '这些充满『强烈画面感』的音乐'
        },{
          imgUrl:'https://p1.music.126.net/Y75E1X-66RO60czNGC_dJw==/109951169255109272.jpg?param=140y140',
          number:8390,
          msg:'205 城市、记忆、文学、电影，王家卫的《繁花》创造文艺史大事件'
        },{
          imgUrl:'https://p2.music.126.net/TacJxbYVjD0vc7Nrn5FzUQ==/109951163557993210.jpg?param=140y140',
          number:9021,
          msg:'「看书学习」在安静的位置看热闹的世界'
        },{
          imgUrl:'https://p1.music.126.net/gks2XHs4aQbwJH0riZWXfw==/109951169231026400.jpg?param=140y140',
          number:9440,
          msg:'我会等（魏大勋翻唱）启航2024央视跨年晚会'
        }],

      singerlist:[
        {
        singerimgUrl:'https://p2.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62',
          singername:'张惠妹aMEI',
          singermsg:'台湾歌手张惠妹'
         },
        {
          singerimgUrl:'https://p1.music.126.net/TQZGbxp-xnJla-q7ii9z0A==/1364493985498917.jpg?param=62y62',
          singername:'吴莫愁Momo',
          singermsg:'《中国好声音》选手吴莫愁'
        },
        {
          singerimgUrl:'https://p1.music.126.net/whG7pbsbd1akKtOE7V3R_Q==/109951168299161319.jpg?param=62y62',
          singername:'孙楠',
          singermsg:'歌手孙楠 代表作《你快回来》《燃烧》'
        },
        {
          singerimgUrl:'https://p1.music.126.net/1GIlkxKmvKu66ufU83FyvA==/31885837222663.jpg?param=62y62',
          singername:'麦田老狼',
          singermsg:'歌手，音乐人。代表作《同桌的你》等。'
        },
        {
          singerimgUrl:'https://p1.music.126.net/MXMZYksJmsa0gcGkuk2mDQ==/109951167712155407.jpg?param=62y62',
          singername:'陈楚生',
          singermsg:'唱作歌手'
        }],
      anchorList:[
        {
          anchorimgUrl:'https://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40',
          anchorname:'陈立',
          anchormsg:'心理学家、美食家陈立教授'
        },
        {
          anchorimgUrl:'https://p1.music.126.net/GgXkjCzeH4rqPCsrkBV1kg==/109951164843970584.jpg?param=40y40',
          anchorname:'刘维-Julius',
          anchormsg:'歌手、播客节目《维维道来》主理人'
        },
        {
          anchorimgUrl:'https://p1.music.126.net/bYcck7EzVurzLWC_QY3Epw==/109951169215290550.jpg?param=40y40',
          anchorname:'莫非定律乐团',
          anchormsg:'男女双人全创作独立乐团'
        },
        {
          anchorimgUrl:'https://p1.music.126.net/NHjNoFpLDEZ-3OR9h35z1w==/109951165825466770.jpg?param=40y40',
          anchorname:'碎嘴许美达',
          anchormsg:'脱口秀网络红人'
        },
        {
          anchorimgUrl:'https://p1.music.126.net/mMZvNruOjEa4XNL6-lWjNg==/109951168919647064.jpg?param=40y40',
          anchorname:'银临Rachel',
          anchormsg:''
        }

      ],
    albumlist:[
      {
        albumimgUrl:'https://p3.music.126.net/EjyEKuuM_xoag8Jg-2AewQ==/109951169188739215.jpg?param=100y100',
        albumname:'裘德',
        albummsg:'裘德'
      },
      {
        albumimgUrl:'https://p3.music.126.net/Ew_j5x-UX6JRMNIn__bTkw==/109951169204144594.jpg?param=100y100',
        albumname:'明明早点放弃就没事了',
        albummsg:'原子邦妮'
      },
      {
        albumimgUrl:'https://p3.music.126.net/Fuh6ppkM0SNKDkMfucSyDQ==/109951169162277015.jpg?param=100y100',
        albumname:'绯闻 (HE)',
        albummsg:'沈以诚'
      },
      {
        albumimgUrl:'https://p4.music.126.net/noitk3XANlawvlARis_opA==/109951169143352092.jpg?param=100y100',
        albumname:'小霞3.0',
        albummsg:'小霞'
      },
      {
        albumimgUrl:'https://p3.music.126.net/TBKCGkT2deMpO8WtE1BM6Q==/109951169159480228.jpg?param=100y100',
        albumname:'脏艺术家',
        albummsg:'MC HotDog 热狗'
      }
    ],
      toplist:[
        {
          topimgUrl:'https://p3.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100',
          topname:'飙升榜',
          topmsg:''
        },
        {
          topimgUrl:'https://p3.music.126.net/wVmyNS6b_0Nn-y6AX8UbpQ==/109951166952686384.jpg?param=100y100',
          topname:'新歌榜',
          topmsg:''
        },
        {
          topimgUrl:'https://p4.music.126.net/iFZ_nw2V86IFk90dc50kdQ==/109951166961388699.jpg?param=100y100',
          topname:'原创榜',
          topmsg:''
        }]

    }
  },
  components:{

    AppBanner:AppBanner,
    HotTuiJian:HotTuiJian,
    SearList:SearList,
    SingerList:SingerList,
    ReMenAnchor:ReMenAnchor,
    AlbumList:AlbumList,
    TopList:TopList,
    SongList:SongList,
    AppFooter:AppFooter
  },
  methods:{
    father(index){
      console.log('第几个',index);
      this.imagelist[index].number++;

    },
    btn(){
      console.log("@/assets/img/button.png")
    }

  }

}
</script>

<style  scoped>
html,body{
  padding: 0;
  margin: 0;
  width: 100%;
  background: gainsboro;
}
.content{
  background: white;
  width: 800px;
  height: 1000px;

}
.content-left{
  display: flex;
  flex-wrap:wrap;

 align-items: center;
  margin-left: 215px;
  width: 729px;
 height: 500px;
}
.mintitle{
  color: #666;
  font-size: 12px;
  margin: 10px 18px;


}
.mintitle-sum{
  display: flex;
  align-items: center;
  position: absolute;
  left: 200px;
  top:10% ;

}
.album{
  margin-left: 205px;
}
.albumlist{
  display: flex;
  flex-wrap:wrap;
  width: 689px;

}
.box{
  position: relative;

}
.part{
  width: 253px;
  height: 1360px;
  position: absolute;
  left: 947px;
  top:-1049px;
  background:white ;
  border: 1px solid #cccccc;
}
.part1{
  width: 253px;
  height: 120px;
  background:#f5f5f5;
  text-shadow: 0 2px 0 #cccccc ;

}
.part11{
  width: 205px;
  height: 35px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 22px;
  color: #666;
  font-size: 12px;
}
.part111{
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 0 #8a060b;
  background: #ff2227;
  border: #ff2227 5px;
  border-radius: 7px;
  margin-left: 65px;
}
.part2{
  width: 250px;
  height: 25px;
  display: flex;
  margin: 5px 0;
}
.part2-right{
  font-size: 12px;
  color: #666666;
  margin-left: 110px;
}
.part2-left{
  font-size: 14px;
  color: #000000;
  margin-left: 15px;
  font-weight: 1000;
}
.line{
margin-top: 10px;
  width: 180px;
  margin-left: 15px;
  padding: 0 0 10px 34px;
  border-bottom: 1px solid #000;
  border-bottom-color: rgb(0, 13, 12);

}
.part3{
  width: 250px;
  height: 25px;
  display: flex;
  margin: 5px 0;

}
.part3-left{
  font-size: 14px;
  color: #000000;
  margin-left: 15px;
  font-weight: 1000;

}
.line2{
  width: 180px;
  margin-left: 15px;
  padding: 0 0 0 34px;
  border-bottom: 1px solid #000;
  border-bottom-color: rgb(0, 13, 12);

}
.applicant{
  width: 210px;
  height: 31px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 1000;
  background: #fafafa;
  border: 1px solid #666666 ;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 31px;
  margin-left: 10px;

}
.box2{
  width: 100%;
  height: 245px;
  margin-top: 40px;
}
.TopList{
  display: flex;
  margin-left: 235px;
  height: 120px;
}

.float{
  display: flex;
  margin-left: 235px;
}
ol{
  height: 319px;
  //margin-left: 50px;
  line-height: 32px;
  padding: 0 0 0 0;
  margin-top: 0;



}
ol li{
  list-style:none;
  display: list-item;
  text-align: -webkit-match-parent;
  font-size: 12px;
  //margin-left: -24px;
  font-weight:500;
  //margin-right: 24px;


}
.shen{
  background: #e8e8e8;
}
.qian{
  background: #fafafa;

}
.no-top{
  color: #c10d0c;
  float: left;
  position: relative;
  //left: -17px;
  width: 35px;
  height: 32px;
  //margin-left: -35px;
  text-align: center;
  font-size: 16px;


}
.no{
  float: left;
  position: relative;
  //left: -17px;
  width: 35px;
  height: 32px;
  //margin-left: -35px;
  text-align: center;
  color: #666;
  font-size: 16px;
  line-height: 32px;

}
.queryall{
  clear: both;
  height: 32px;
  width: 230px;
  //margin-right: -20px;
   text-align: right;
  line-height: 32px;
  font-size: 13px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  background: #e8e8e8;
}
.box3{
  height: 700px;

}
.ying{
  height: 400px;
}

</style>